<template>

    <div class="dspDetail">
        <div class="outer_top">

            <div class="inner_top">

                <div class="title_and_heyue">
                    <div class="title">
                        {{data.title}}
                    </div>

                    <div class="heyue" @click.stop="to_zhineng(data)">
                        智能合约
                    </div>

                </div>

                <div class="top_content">
                    <div class="top_content_left">
                        <div class="author">作者：{{data.authorName}}</div>
                        <div class="type">类型：{{data.creationTypeName}}</div>

                        <div class="money" v-if="(data.price == 0) || (data.price == null)">购买金额：0</div>
                        <div class="money" v-else>购买金额：{{data.price}}</div>

                        <div class="time">更新于：{{data.auditTime}}</div>
                    </div>
                    <div class="top_content_right">
                        <div class="zuozheid">作者ID：</div>
                        <div class="hash">{{data.publisherIdentity}}</div>
                    </div>
                </div>

            </div>

        </div>

        <div class="pay_panel">
            <div class="pay_panel_top">
                <div class="guankan_and_price">
                    <div class="guankan">授权观看:</div>
                    <div class="price" v-if="data.scanType == 2">免费</div>
                    <div class="price" v-else   >￥{{data.price}}</div>
                </div>
                <div class="pay_button" v-if="data.ScanType == 2">观看</div>
                <div class="pay_button" v-else @click.stop="to_pay(data.id)" v-if="data.price != null">
                    支付
                </div>
            </div>
            <div class="pay_panel_bottom" @click.stop="$router.back()">
                返回短视频剧本
            </div>
        </div>

        <div class="outer_bottom">
            <div class="inner_bottom">
                <div class="shipin_xiangqing">视频详情</div>
                <div class="paishe_huanjing">拍摄环境：</div>
                <div class="paishe_huanjing_content">
                    {{data.sceneName}}
                </div>

                <div class="canyan_juese">
                    参演角色：
                </div>

                <div class="canyan_juese_content">
                    {{data.roleNumberName}}
                </div>

                <div class="juben_gaikuang">
                    剧本概况：
                </div>

                <div class="juben_gaikuang_content" :innerHTML="data.content" v-if="isShow">

                </div>

                <div v-else style="margin-top: 20px">
                    付费后查看
                </div>


<!--                <div class="inner_bottom_content">-->

<!--                </div>-->


            </div>
        </div>

    </div>

</template>

<script>
    import {IndexScriptWritingDetail} from "../../../api/dsp/ScriptWritingDetail";
    import {getUserInfo} from "../../../utils/auth";
    import {ScriptWritingDetail} from "../../../api/ScriptWriting";

    export default {
        name: "dspDetail",
        data(){
          return{
              data:{},
              isShow:false,
              payShow:true,
          }
        },
        created(){
            if(getUserInfo() == undefined){

                let data={
                    id:this.$route.query.id
                }

                IndexScriptWritingDetail(data).then(res=>{
                    this.data=res.data
                    console.log('xxxxxxxx',this.data.scanType)
                    //免费
                    if(this.data.scanType == 2){

                        this.isShow=true
                        this.payShow=false
                    }else{

                        //收费
                        this.isShow=false
                        this.payShow=true

                    }

                })

            }else{

                let data={
                    id:this.$route.query.id
                }

                ScriptWritingDetail(data).then(res=>{
                    this.data=res.data
                    console.log('详细为',this.data)
                    console.log('作者的个人信息',JSON.parse(getUserInfo()))
                    if(this.data.publisherIdentity == JSON.parse(getUserInfo()).publisherIdentity){
                        this.isShow = true
                        return
                    }
                    //免费
                    if(this.data.scanType == 2){

                        this.isShow=true
                        this.payShow=false

                    }else{

                        if(this.data.tradeInfo == null){
                            this.isShow=false
                            this.payShow=true
                        }else{

                            this.isShow=true
                            this.payShow=false

                        }

                    }
                })

            }
        },

        mounted(){

        },

        methods:{
            to_zhineng(data){
                let href='http://106.14.18.148:4000/tokens/'+data.ContractId+'/instance/'+data.TokenId+'/token-transfers'
                window.open(href, '_blank');
            },
            to_pay(id){
                this.$router.push({path:'/copyright/copyrightTrade',query:{id:id}})
            },
        }
    }
</script>

<style scoped>


    .dspDetail{
        width: 100%;
        position: relative;
    }
    .outer_top{
        width: 100%;
        overflow: hidden;
        height: 240px;
        background: #2EB0C6;
    }
    .inner_top{
        width: 1001px;
        height: 240px;
        margin: 0px auto;
    }
    .title_and_heyue{
        width: 336px;
        display: flex;
        justify-content: space-between;
    }
    .title{
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        margin-top: 45px;
    }
    .heyue{
        width: 82px;
        height: 32px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #FFFFFF;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        margin-top: 42px;
    }
    .top_content{
        width: 438px;
        margin-top: 29px;
        display: flex;
        justify-content: space-between;
    }
    .top_content_left div{
        width: 211px;

        font-size: 14px;
        line-height: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;

        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;

        margin-bottom: 21px;
    }
    .top_content_right{
        margin-top: -3px;
    }
    .top_content_right div{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }
    .hash{
        margin-top: 10px;
        width: 204px;
        height: 39px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-decoration: underline;
        color: #FFFFFF;
    }
    .pay_panel{
        width: 309px;
        height: 254px;
        background: #f5f5f5;
        position: absolute;
        top: 73px;
        right: 459px;
        border-radius: 4px;
    }
    .pay_panel_top{
        width: 100%;
        height: 195px;
        background: #FFFFFF;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        overflow: hidden;
    }
    .guankan_and_price{
        display: flex;
        justify-content: space-between;
        margin-top: 45px;

    }
    .guankan{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #4C4C4C;
        margin-left: 29px;
    }
    .price{
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF4444;
        margin-right: 55px;
        margin-top: -4px;
    }
    .pay_button{
        width: 243px;
        height: 46px;
        background: #2EB0C6;
        border-radius: 4px;
        margin: 0px auto;
        margin-top: 31px;

        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 46px;
        text-align: center;
        cursor: pointer;
    }
    .pay_panel_bottom{
        position: absolute;
        bottom: 0px;

        width: 309px;
        height: 48px;
        background: #FFFFFF;
        border: 1px solid #2EB0C6;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #2EB0C6;
        line-height: 48px;
        text-align: center;
        margin-left: -1px;
        cursor: pointer;
    }
    .outer_bottom{
        width: 100%;
        background: #FFFFFF;
        overflow: hidden;
    }
    .inner_bottom{
        width: 1001px;
        margin: 0px auto;
        overflow: hidden;;
    }
    .inner_bottom_content{
        width: 683px;
    }
    .shipin_xiangqing{
        margin-top: 40px;

        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
    }
    .paishe_huanjing{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 14px;
        margin-top: 24px;
    }
    .paishe_huanjing_content{
        margin-top: 12px;
        font-size: 14px;
        line-height: 20px;
        min-height: 20px;
        max-height: 40px;
        width: 600px;

        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .canyan_juese{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 14px;

        margin-top: 36px;
    }
    .canyan_juese_content{
        margin-top: 12px;
        font-size: 14px;
        line-height: 20px;
        min-height: 20px;
        max-height: 40px;
        width: 600px;

        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .juben_gaikuang{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 14px;

        margin-top: 36px;
    }
    .juben_gaikuang_content{
        margin-top: 12px;
        width: 600px;
        font-size: 16px;
        margin-bottom: 50px;
        /*font-size: 14px;*/
        /*line-height: 20px;*/
        /*min-height: 20px;*/
        /*max-height: 100px;*/


        /*font-family: Microsoft YaHei;*/
        /*font-weight: 400;*/
        /*color: #666666;*/

        /*!*多行文本溢出省略号*!*/
        /*display: -webkit-box;*/
        /*-webkit-box-orient: vertical;*/
        /*-webkit-line-clamp: 5;*/
        /*overflow: hidden;*/
        /*margin-bottom: 204px;*/
    }


</style>
